<template id="IndexBody">
  <div class="container">
    <!-- <button @click="addCompany">增加公司</button>
    <button @click="removeCompany">移除公司</button>
    <button @click="addPolygon">增加遮罩</button>
    <button @click="removePolygon">移除遮罩</button> -->
    <amap ref="amap" />
    <div class="closeAll" @click="closeAll" v-if="closeAllButton"></div>
    <!--编辑坐标按钮-->
    <div
      class="closeAll"
      :class="editOff ? 'closeAll2' : 'closeAll1'"
      @click="edit"
      v-show="false && closeAllButton"
    ></div>
    <div class="selectBlock" v-if="showSearch">
      <select-block
        ref="selectBlock"
        v-drag
        v-if="showSelectBlock"
        :monitorItems="monitorItems"
        @monitorSelectAll="monitorSelectAll($event)"
        @clickPublicMonitor="clickPublicMonitor()"
        @canclePublicMonitor="canclePublicMonitor()"
        @openEnclosureFunction="openEnclosure($event)"
        @closeEnclosureFunction="closeEnclosure($event)"
        @openAreaFunction="openArea($event)"
        @closeAreaFunction="closeArea($event)"
        @openRoadFunction="openRoad()"
        @closeRoadFunction="closeRoad()"
        @openBayonetFunction="openBayonet()"
        @closeBayonetFunction="closeBayonet()"
        @openVehicleFunction="openVehicle()"
        @closeVehicleFunction="closeVehicle()"
        @openPersonFunction="openPerson(arguments)"
        @openMonitorFunction="openMonitor($event)"
        @closeSelectBlock="closeSelectBlock()"
      />
    </div>
    <div v-show="getshowOff">
      <div class="person" v-drag v-if="showPerson">
        <person-table @showbox="showPerson = false" />
      </div>
      <div class="vehicle" v-drag v-if="showVehicle">
        <vehicle-table @showbox="showVehicle = false" />
      </div>
      <div class="monitor" v-if="showMonitor">
        <monitor-table @showbox="showMonitor = false" />
      </div>

      <div class="bayonet" v-drag v-if="showBayonet">
        <bayonet-table @showbox="showBayonet = false" />
      </div>
      <div class="warning" v-drag v-if="showWarning">
        <warning-table @showbox="showWarning = false" />
      </div>

      <div class="changeMap" v-drag v-if="showChangeMap">
        <changeMap @openChangeDialog="openChangeDialog" />
      </div>
      <div
        class="changeDialog"
        :style="{ top: dialogTop, left: dialogLeft, right: dialogRight }"
        v-drag
        v-if="showChange"
      >
        <change-dialog
          @closeChangeDialog="closeChangeDialog"
          @screenFull="screenFull"
          @resetScreen="resetScreen"
        />
      </div>
    </div>
    <!-- 视频弹窗 -->
    <div style="top: 0; width: 100%">
      <div v-drag style="top: 0; width: 100%"></div>
    </div>
    <PUBWIN @closewin="closewin1" v-if="videoboxstatus" :title="'入侵告警'">
      <VIDEOBOX
        v-if="videoboxstatus"
        :videoUrl="videourl"
        :list="alarmList"
        @errorUrl="errorUrl"
      />
    </PUBWIN>
    <PUBWIN @closewin="closewinPic" v-if="picboxstatus" :title="'超速告警'">
      <PICBOX v-if="picboxstatus" :list="list" />
    </PUBWIN>
    <!-- 历史记录弹窗 -->
    <PUBWIN
      v-if="historyOff.status"
      @closewin="closeHistory"
      :title="'历史记录'"
    >
      <HISTORYLIST v-if="historyOff.status" :source="historyOff.source" />
    </PUBWIN>
    <!--无人机信息弹窗-->
    <PUBWIN
      :title="getplaneDataList.planeName || '无人机信息'"
      :width="'14vw'"
      @closewin="closePlane"
      v-if="planeWinOff"
    >
      <PLANELIST :list="getplaneDataList" />
    </PUBWIN>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { mapState, mapMutations, mapActions } from "vuex";
import VIDEOBOX from "components/publicVideoBox";
import PICBOX from "components/publicPicBox";
import polygonData from "@/assets/utils/polygonData";
import polygonRoad from "@/assets/utils/polygonRoad";
import enclosure from "../../../../../public/modelObj/enclosure/enclosure";
import enclosureType from "../../../../../public/modelObj/enclosure/enclosureType";
import roadPathList from "@/assets/utils/roadPath";
import roadNameList from "@/assets/utils/roadName";
import PUBWIN from "components/win/pubwin";
import HISTORYLIST from "components/historylist";
import PLANELIST from "components/planeList";
import Bus from "@/utils/bus";
import {
  bayonetTable,
  monitorTable,
  personTable,
  vehicleTable,
  warningTable,
  amap,
  changeMap,
  selectBlock,
  changeDialog,
} from "./components/index";

export default {
  name: "IndexBody",
  components: {
    bayonetTable,
    monitorTable,
    personTable,
    vehicleTable,
    warningTable,
    amap,
    changeMap,
    VIDEOBOX,
    selectBlock,
    PICBOX,
    PUBWIN,
    HISTORYLIST,
    PLANELIST,
    changeDialog,
  },
  data() {
    return {
      dialogTop: "0.47vw",
      dialogLeft: "23vw",
      dialogRight: "23vw",
      showChange: false,
      showPerson: true,
      showVehicle: true,
      showMonitor: true,
      showBayonet: true,
      showWarning: true,
      showSearch: true,
      showSelectBlock: true,
      showChangeMap: true,
      closeAllButton: true,
      cornerIcon: require("@/assets/images/indexBody/cornerIcon.png"),
      list: {},
      alarmList: {},
      monitorItems: [],
    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
    ...mapState({
      videoboxstatus: (state) => state.winconcrol.videoShow, //这是mapState的使用方式
      picboxstatus: (state) => state.winconcrol.picShow, //这是mapState的使用方式
      socketMessage: (state) => state.winconcrol.socketMessage, //这是mapState的使用方式
      showOff: (state) => state.winconcrol.showOff,
      showOffRight: (state) => state.winconcrol.showOffRight,
      videourl: (state) => state.winconcrol.videoUrl, //这是mapState的使用方式
      historyOff: (state) => state.winconcrol.historyOff, //这是mapState的使用方式
      planeWinOff: (state) => state.winconcrol.planeWinOff,
      planeData: (state) => state.winconcrol.planeWinOff,
      planeDataList: (state) => state.winconcrol.planeDataList,
      editOff: (state) => state.winconcrol.editOff,
    }),
    getshowOff() {
      return this.showOff && this.showOffRight;
    },
    getTitle() {
      //console.log(this.socketMessage);
      const { source, address } = this.socketMessage;
      if (source == 1 || source == 3) {
        return address;
      } else {
        return "";
      }
    },
    getplaneDataList() {
      return this.planeDataList;
    },
  },
  // 监控data中的数据变化
  watch: {
    socketMessage(n, o) {
      const { source } = n;
      if (source == 1) {
        // 海康入侵报警
        this.alarmList = n;
      } else if (source == 3) {
        // 宇视报警
        // this.speedList = n;
        this.list = n;
      }
    },
  },
  // 方法集合
  methods: {
    ...mapMutations([
      "setVideoShow",
      "setSocketVideoUrl",
      "setPicShow",
      "setHistoryOff",
      "setPlaneWinOff",
      "setShowOff",
      "seteditOff",
      "setShowOffRight",
    ]),
    edit() {
      this.editOff ? this.seteditOff(false) : this.seteditOff(true);
    },
    errorUrl(n) {
      //console.log("我是N", n);
      if (n.type == "error") {
        if (n.videourl == this.videourl) {
          this.setSocketVideoUrl("");
        }
      }
    },
    closeHistory() {
      this.setHistoryOff(
        JSON.stringify({
          status: false,
        })
      );
    },
    //关闭倾斜投影
    closeChangeDialog() {
      this.showChange = false;
      this.showSearch = true;
      this.dialogTop = "0.47vw";
      this.dialogLeft = "23vw";
      this.dialogRight = "23vw";
    },
    //打开倾斜投影
    openChangeDialog() {
      this.showChange = !this.showChange;
      if (this.showChange) {
        this.showSearch = false;
      } else {
        this.showSearch = true;
      }
    },
    //全屏
    screenFull() {
      this.dialogTop = "-4.51vw";
      this.dialogLeft = "0";
      this.dialogRight = "0";
    },
    //退出全屏()
    resetScreen() {
      this.dialogTop = "0.47vw";
      this.dialogLeft = "23vw";
      this.dialogRight = "23vw";
    },
    addCompany() {
      this.$refs.amap.createCompany();
    },
    removeCompany() {
      this.$refs.amap.removeCompany();
    },
    //打开区域模块
    openArea(payload) {
      if (payload.content == "all") {
        polygonData.polygonDataList.map((item, index) => {
          this.$refs.amap.createPolygon(item, index);
          // this.$refs.amap.createPolygonName(item, index);
        });
        polygonRoad.map((item, index) => {
          this.$refs.amap.createPolygonRoad(item, index);
          // this.$refs.amap.createPolygonName(item, index);
        });
      } else {
        let tempNo = [];
        let tempType = [];
        payload.content.map((item, index) => {
          polygonData.polygonDataList.map((element, location) => {
            if (item == element.id) {
              tempNo.push(element.no);
              tempType.push(element.id);
            }
          });
        });
        let res = tempNo.join(",").split(",");
        let temp = tempType.join(",").split(",");
        let areaList = polygonData.polygonDataList;
        let times = -1;
        res.map((item, index) => {
          areaList.map((element, location) => {
            if (item == element.no) {
              times++;
              this.$refs.amap.createPolygon(element, times);
            }
          });
        });
        if (temp.indexOf("3") !== -1) {
          polygonRoad.map((item, index) => {
            this.$refs.amap.createPolygonRoad(item, index);
          });
        }
      }
    },
    //关闭区域模块
    closeArea(payload) {
      if (payload.content == "all") {
        this.$refs.amap.removePolygon();
      }
    },
    //打开围网
    openEnclosure(payload) {
      if (payload.content == "all") {
        enclosure.enclosureList.map((item, index) => {
          this.$refs.amap.createEnclosure(item, index);
        });
      } else {
        let tempNo = [];
        payload.content.map((item, index) => {
          enclosureType.enclosureTypeList.map((element, location) => {
            if (item == element.id) {
              tempNo.push(element.number.join(","));
            }
          });
        });
        let res = tempNo.join(",").split(",");
        let enclosureList = enclosure.enclosureList;
        res.map((item, index) => {
          enclosureList.map((element, location) => {
            if (item == element.id) {
              this.$refs.amap.createEnclosure(element, item);
            }
          });
        });

        // //console.log(enclosureList, "enclosureList");
      }
    },
    //关闭篮网
    closeEnclosure(payload) {
      if (payload.content == "all") {
        this.$refs.amap.removeEnclosure();
      }
    },
    //打开道路及道路名称
    openRoad() {
      //加载道路
      // roadPathList.map((item, index) => {
      //   this.$refs.amap.createRoad(item, index);
      // });
      this.$refs.amap.createRoadAsync();
      // 加载道路名称;
      // roadNameList.map((item, index) => {
      //   this.$refs.amap.createRoadName(item, index);
      // });
    },
    //关闭道路及道路名称
    closeRoad() {
      this.$refs.amap.closeRoadAsync();
    },
    //
    closewin1() {
      this.setSocketVideoUrl("");
      this.setVideoShow(false);
    },
    closewinPic() {
      this.setPicShow(false);
    },
    //打开卡口
    openBayonet() {
      this.$refs.amap.createBayonets();
    },
    //关闭卡口
    closeBayonet() {
      this.$refs.amap.removeBayonets();
    },
    //打开危化品车辆
    openVehicle() {
      this.$refs.amap.createVehicle();
    },
    //关闭危化品车辆
    closeVehicle() {
      this.$refs.amap.removeVehicle();
    },
    closePlane() {
      this.setPlaneWinOff(false);
    },
    //获取公司人员定位
    openPerson(payload) {
      this.$refs.amap.createPerson(payload);
    },
    //获取监控定位
    openMonitor(payload) {
      this.$refs.amap.createMonitor(payload);
    },
    //关闭选项框
    closeSelectBlock() {
      this.showSelectBlock = false;
      this.showChangeMap = false;
    },
    //重置页面
    resetMap() {
      this.showChangeMap = true;
      this.showChange = false;
      this.showPerson = true;
      this.showVehicle = true;
      this.showMonitor = true;
      this.showBayonet = true;
      this.showWarning = true;
      this.showSearch = true;
      this.showSelectBlock = true;
      this.closeAllButton = true;
    },
    //获取全部监控
    monitorSelectAll(payload) {
      this.monitorItems = payload;
    },
    //选中管廊按钮
    clickPublicMonitor() {
      Bus.$emit("clickPublicMonitor");
    },
    //取消选中管廊
    canclePublicMonitor() {
      Bus.$emit("canclePublicMonitor");
    },
    //关闭所有弹窗
    closeAll() {
      this.showChangeMap = false;
      this.showChange = false;
      this.showPerson = false;
      this.showVehicle = false;
      this.showMonitor = false;
      this.showBayonet = false;
      this.showWarning = false;
      this.showSearch = false;
      this.showSelectBlock = false;
      this.closeAllButton = false;
      this.setShowOff(true);
      this.setShowOffRight(true);
      Bus.$emit("resetActive");
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
   
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() { Bus.$on("resetMap", (payload) => {
      this.resetMap();
    });
    Bus.$on("openPublicMonitor", (payload) => {
      this.$refs.amap.createMonitor(payload);
      this.$refs.selectBlock.chosePublicMonitor();
      // this.monitorItems = [{ id: 37 }];
    });
    Bus.$on("closePublicMonitor", (payload) => {
      this.$refs.selectBlock.canclePublicMonitor();
      this.$refs.amap.removeMonitor();
    });},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  .closeAll {
    position: absolute;
    top: 0.47vw;
    cursor: pointer;
    background: url("../../../../assets/images/indexHeader/closeButton.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 1.5vw;
    height: 1.5vw;
    right: 25vw;
  }
  .closeAll1 {
    position: absolute;
    top: 0.47vw;
    cursor: pointer;
    background: url("../../../../assets/images/indexHeader/closeButton1.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 1.5vw;
    height: 1.5vw;
    right: 27vw;
  }
  .closeAll2 {
    position: absolute;
    top: 0.47vw;
    cursor: pointer;
    background: url("../../../../assets/images/indexHeader/closeButtontrue.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 1.5vw;
    height: 1.5vw;
    right: 25vw;
  }
  .person {
    position: absolute;
    top: 0.47vw;
    left: 0.7vw;
    cursor: pointer;
    i {
      position: absolute;
      right: 0;
    }
  }
  .vehicle {
    position: absolute;
    left: 0.7vw;
    bottom: 0.83vw;
    cursor: pointer;
    i {
      position: absolute;
      right: 0;
    }
  }
  .monitor {
    position: absolute;
    left: 22vw;
    right: 24vw;
    bottom: 0.83vw;
    i {
      position: absolute;
      right: 0;
    }
  }
  .bayonet {
    position: absolute;
    top: 0.47vw;
    right: 0.7vw;
    cursor: pointer;
    i {
      position: absolute;
      right: 0;
    }
  }
  .warning {
    position: absolute;
    bottom: 0.83vw;
    right: 0.7vw;
    cursor: pointer;
    i {
      position: absolute;
      right: 0;
    }
  }
  .changeMap {
    position: absolute;
    bottom: 11.5vw;
    right: 22vw;
  }
  .selectBlock {
    position: absolute;
    top: 0.47vw;
    left: 22.37vw;
  }
  .changeDialog {
    position: absolute;
  }
}
.right_box {
  position: absolute;
  width: 20vw;
  top: 1vw;
  bottom: 1vw;
  right: 1.59vw;
}
</style>
